<template>
	<div>
		<el-dialog title="角色编辑器" :visible.sync="ruleEditerData.show" width="800px" center :close-on-click-modal='false' @open='openEditer' top="50px">
			<el-form v-loading='loading' label-position="right" label-width="150px" size="mini" :model='ruleEditerData.rule' :rules='rules' ref="ruleForm">
				<el-form-item label="角色名称" prop='name'>
					<el-input v-model.trim="ruleEditerData.rule.name"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" prop='description'>
					<el-input type="textarea" :rows="2" style="width:400px" resize="none" v-model.trim="ruleEditerData.rule.description"></el-input>
				</el-form-item>
				<el-form-item label="权限配置">
					<div v-for='menu in menuList'>
						<el-checkbox v-model="checkMenuList" :label="menu.menuUrl">{{menu.name}}</el-checkbox>
						<div v-show="checkMenuList.indexOf(menu.menuUrl)!=-1" style='width:600px;height:auto;margin-left:30px'>
							<div style="width:200px;display:inline-block" v-for='f in menu.functions.split(",")' :key='f' v-show="f!=''">
								<el-checkbox v-model="checkFunctionList[menu.menuUrl]" v-show="f!=''" :label="f">{{functionMap[f]}}</el-checkbox>
							</div>
						</div>
					</div>
				</el-form-item>
			</el-form>
			<span slot="footer">
              <el-button @click="ruleEditerData.show=false" size="small">取消</el-button>
              <el-button type="primary" @click="onsubmit" size="small">确定</el-button>
            </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'AdminEditer',
		data() {
			var checkName = (rule, value, callback) => {
				if(!value) {
					callback(new Error("角色名称不能为空"));
					return;
				}
				var params = new URLSearchParams();
				params.append("name", value);
				params.append("id", this.ruleEditerData.rule.id);
				this.$http.post(this.$store.state.url + "/form/unique/rulename", params).then(
					response => {
						if(response.data.status == 200) callback();
						else callback(new Error(response.data.message));
					}
				).catch();
			};
			return {
				loading: false,
				rules: {
					name: [{
						required: true,
						validator: checkName,
						trigger: 'blur'
					}]
				},
				menuList: [{
					menuUrl: '',
					name: '',
					functions: '',
				}],
				checkFunctionList: {},
				checkMenuList: [],
				functionMap: {}
			};
		},
		methods: {
			onsubmit: function() {
				if(this.loading) return;
				this.loading = true;
				this.$refs.ruleForm.validate(
					valid => {
						if(valid) this.submitExecute();
						else this.loading = false;
					}
				);
			},
			submitExecute: function() {
				var params = new URLSearchParams();
				params.append("id", this.ruleEditerData.rule.id);
				params.append("name", this.ruleEditerData.rule.name);
				params.append("description", this.ruleEditerData.rule.description);
				for(var i = 0; i < this.checkMenuList.length; i++) {
					params.append(this.checkMenuList[i], this.checkFunctionList[this.checkMenuList[i]]);
				}
				this.$http.post(this.$store.state.url + "/rule/save", params).then(
					response => {
						if(response.data.status == 200) {
							this.$message({
								message: '保存成功',
								type: 'success'
							});
							this.$emit('ruleEdited', response.data.data);
						} else {
							this.$message.error(response.data.message);
						}
						this.loading = false;
					}
				).catch();
			},
			init: function() {
				this.$http.post(this.$store.state.url + "/menu/list").then(
					response => {
						if(response.data.status == 200) {
							this.menuList = response.data.data.menuList;
							var checkFunctionList = {};
							for(var i = 0; i < this.menuList.length; i++) checkFunctionList[this.menuList[i].menuUrl] = this.menuList[i].functions.split(',');
							this.checkFunctionList = checkFunctionList;
							this.functionMap = response.data.data.functionMap;
						} else {
							this.$message.error(response.data.message);
						}
						this.loading = false;
					}
				).catch();
			},
			editerInit: function() {
				var checkFunctionList = {};
				for(var i = 0; i < this.menuList.length; i++) checkFunctionList[this.menuList[i].menuUrl] = this.menuList[i].functions.split(',');
				this.checkFunctionList = checkFunctionList;
				this.checkMenuList = [];
				this.ruleEditerData.rule.name = '';
				this.ruleEditerData.rule.description = '';
			},
			openEditer: function() {
				if(this.$refs.ruleForm != null) this.$refs.ruleForm.resetFields();
				var id = this.ruleEditerData.rule.id;
				this.editerInit();
				if(this.ruleEditerData.rule.id != "") {
					this.loading = true;
					this.$http.post(this.$store.state.url + "/rule/info", 'id=' + this.ruleEditerData.rule.id).then(
						response => {
							if(response.data.status == 200) {
								this.ruleEditerData.rule = response.data.data.rule;
								this.checkMenuList = response.data.data.checkMenuList;
								var checkFunctionList = response.data.data.checkFunctionList;
								for(var key in checkFunctionList) this.checkFunctionList[key] = checkFunctionList[key];
							} else {
								this.$message.error(response.data.message);
								this.ruleEditerData.show = false;
							}
							this.loading = false;
						}
					).catch();
				}

			},
			functionChange: function(menu, val) {
				alert(val);
				alert(menu.menuUrl);
			}
		},
		created: function() {
			this.init();
		},
		props: ['ruleEditerData']
	}
</script>

<style scoped>
	.el-input {
		width: 300px
	}
</style>